<html>
<head>
	<title>SPE: Multiple Emitters</title>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
	<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
	<p class="numParticles"></p>

    <script type="text/javascript" src="./js/THREE-r84.js"></script>
    <script type="text/javascript" src="./js/Stats.min.js"></script>
    <script type="text/javascript" src="../build/SPE.min.js"></script>

	<script type="text/javascript">
		// variables used in init()
        var scene, camera, renderer, stats, stats2, clock;

        // Used in initParticles()
		var emitter, particleGroup, numEmitters = 120;

		// Setup the scene
        function init() {
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 10000);
            camera.position.z = 200;
            camera.lookAt( scene.position );

            renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.setClearColor(0x000000);

            stats = new Stats();
            clock = new THREE.Clock();

            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0';

            document.body.appendChild( renderer.domElement );
            document.body.appendChild( stats.domElement );
        }

        function getRandomNumber( base ) {
            return Math.random() * base - (base/2);
        }

        function getRandomColor() {
            var c = new THREE.Color();
            c.setRGB( Math.random(), Math.random(), Math.random() );
            return c;
        }

        // Create particle group and emitter
        function initParticles() {
        	particleGroup = new SPE.Group({
        		texture: {
                    value: THREE.ImageUtils.loadTexture('./img/smokeparticle.png'),
                }
        	});

            for( var i = 0; i < numEmitters; ++i ) {
            	emitter = new SPE.Emitter({
                    maxAge: 5,
                    type: Math.random() * 4 | 0,
            		position: {
                        value: new THREE.Vector3(
                            getRandomNumber(200),
                            getRandomNumber(200),
                            getRandomNumber(200)
                        )
                    },

            		acceleration:{
                        value: new THREE.Vector3(
                            getRandomNumber(-2),
                            getRandomNumber(-2),
                            getRandomNumber(-2)
                        )
                    },

                    velocity: {
                        value: new THREE.Vector3(
                            getRandomNumber(5),
                            getRandomNumber(5),
                            getRandomNumber(5)
                        )
                    },

                    rotation: {
                        axis: new THREE.Vector3(
                            getRandomNumber(1),
                            getRandomNumber(1),
                            getRandomNumber(1)
                        ),
                        angle: Math.random() * Math.PI,
                        center: new THREE.Vector3(
                            getRandomNumber(100),
                            getRandomNumber(100),
                            getRandomNumber(100)
                        )
                    },

                    wiggle: {
                        value: Math.random() * 20
                    },

                    drag: {
                        value: Math.random()
                    },

                    color: {
                        value: [ getRandomColor(), getRandomColor() ]
                    },
                    size: {
                        value: [0, 2+ Math.random() * 10, 0]
                    },

            		particleCount: 100,

                    opacity: [0, 1, 0]
            	});

            	particleGroup.addEmitter( emitter );
            }

        	scene.add( particleGroup.mesh );

        	document.querySelector('.numParticles').textContent =
        		'Total particles: ' + particleGroup.particleCount;
        }



        function animate() {
            requestAnimationFrame( animate );

            // Using a fixed time-step here to avoid pauses
            render( clock.getDelta() );
            stats.update();
        }


        function updateCamera() {
            var now = Date.now() * 0.0005;
            camera.position.x = Math.sin( now ) * 500;
            camera.position.z = Math.cos( now ) * 500;
            camera.lookAt( scene.position );
        }


        function render( dt ) {
            particleGroup.tick( dt );
            updateCamera();
            renderer.render( scene, camera );
        }


        window.addEventListener( 'resize', function() {
        	var w = window.innerWidth,
        		h = window.innerHeight;

        	camera.aspect = w / h;
        	camera.updateProjectionMatrix();

        	renderer.setSize( w, h );
        }, false );

        init();
        initParticles();

        setTimeout(animate, 0);

	</script>

</body>
</html>
